<template>
  <div class="param">
        <div class="search-panel">
      <el-form :inline="true" :model="form" @submit.native.prevent>
        <el-form-item>
          <el-select
            v-model="form.equipCode"
            filterable 
            clearable
            placeholder="请选择设备">
            <el-option
              v-for="item in equipList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div> 
    <main-table
      ref="table"
      :loading="loading"
      :pageTotal="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :data="list"
      :columns="columns"
      :currentPage.sync="pageNum"
      :columnType="columnType"
      border>
    </main-table>
  </div>
</template>

<script>
export default {
  props: {
    pointCode: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      pageTotal: 0,
      loading: false,
      columnType: ['index'],
      columns: [
        { label: '名称', prop: 'paramName' },
        { label: '参数值', prop: 'paramValue' }

      ],
      equipList: [],
      multipleSelection: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      list: [],
      form: {
        equipCode: ''
      }
    };
  },
  watch: {
    pointCode: {
      handler(skin) {
        this.getEquipList();
      },
      immediate: true
    }
  },
  methods: {
    search() {
      this.getDataList();
    },
    getEquipList() {
      const params = {
        url: `/api/ems/equip/list?pointCode=${this.pointCode}`,
        type: 'post',
        params: {
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.equipList = rows.map(item => {
            return {
              label: item.equipName,
              value: item.equipCode
            };
          });
        }
      });
    },
    getDataList() {
      const params = {
        url: `/api/ems/equip/keyParam/list `,
        type: 'post',
        params: {
          equipCode: this.form.equipCode,
          pointCode: this.pointCode
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.list = rows;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      if (typeof val === 'number') {
        console.log(`当前页: ${val}`, val);
        this.pageNum = val;
        this.getDataList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.param{

}
</style>